<template>
  <div>
    <div class="search">
      <div class="backgroundBule"></div>
      <input
        class="input"
        type="text"
        placeholder="搜索你想要的的商品"
        placeholder-style="color:#cccccc"
        v-model="filterVal"
      />
      <icon
        @click="handleSearch"
        class="searchClick"
        type="search"
        size="20"
        color="#cccccc"
      />
    </div>
    <div class="list">
      <i-tabs :current="isShelf" color="#6692f7" @change="handleTabChange">
        <i-tab key="1" title="已上架"></i-tab>
        <i-tab key="0" title="已下架"></i-tab>
      </i-tabs>
      <scroll-view
        class="scroll-wrap no-scroll-bar"
        style="height:calc(100% - 42px)"
        scroll-y
        @scrolltolower="handleLoadMore"
      >
        <div
          v-for="(item,idx) in list"
          :key="idx"
          class="goods-block"
          @click="setDisMoney(item)"
        >
          <img :src="item.goodsImg" mode="aspectFit" class="preview" />
          <div class="goods-info">
            <p class="goods-name ellipsis">{{item.goodsName}}</p>
            <!-- <p class="goods-stock">规格: {{item.specification}}</p> -->

            <!-- <p class="goods-price" v-if="item.goodsKind !== 'INTEGRAL'">     -->
            <p class="goods-price">
              <span class="discount">{{item.goodsDiscount}}</span>
              <!-- <span class="discount">分销佣金：{{item.disAmount}}</span> -->
            </p>
            <!-- <p class="goods-price" v-else>
              <span class="discount">{{item.goodsCost}}</span>
              <span class="icon">积分商品</span>
            </p>-->
          </div>
          <div class="edit-block">
            <!-- <button
              :class="isShelf === '1' ? 'edit-btn' : 'edit-btn2'"
              size="mini"
              @click="handleEditGoods(item)"
            >删除</button>-->
            <p class="goods-stock">库存: {{item.goodsStock}}</p>
          </div>
        </div>
        <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
      </scroll-view>
    </div>
    <modal v-if="visible" @confirm="handleClose" @cancel="handleClose">
      <div class="modal">
        <span>分佣金额</span>
        <input
          class="inputCalss"
          v-model="addDisVla"
          type="digit"
          placeholder="请输入分佣金额"
          maxlength="888"
        />
      </div>
    </modal>
  </div>
</template>

<script>
import {} from '@/utils'
import {
  FIND_SHOP_GOODS_PAGE,
  DELETE_GOODS_DIS_API,
  CREATE_GOODS_DIS_API
} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      filterVal: '',
      goodsList: [],
      currentPage: 1,
      alreadyLastPage: false,
      isShelf: '1',
      putawayName: `上架商品`,
      soldOutName: `下架商品`,
      visible: false,
      addDisVla: '',
      publicGoodsNo: ''
    }
  },
  computed: {
    list () {
      return this.goodsList.map(_ => ({
        goodsAmount: '￥' + (_.goodsAmount * 1).toFixed(2),
        disAmount: '￥' + (_.disAmount * 1).toFixed(2),
        goodsDiscount: '￥' + (_.goodsDiscount * 1).toFixed(2),
        goodsName: _.goodsName,
        goodsNo: _.goodsNo,
        goodsStock: _.goodsStock,
        goodsImg: _.goodsImg,
        goodsKind: _.goodsKind,
        goodsCost: '￥' + (_.goodsCost * 1).toFixed(2)
      }))
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onReady () {},
  onLoad () {},
  onShow () {
    this.$cookie.remove('describe-img1')
    this.$cookie.remove('describe-img2')
    this.goodsList = []
    this.currentPage = 1
    this.getGoodsList()
  },
  methods: {
    setDisMoney (item) {
      const vm = this
      vm.publicGoodsNo = item.goodsNo
      this.visible = true
    },
    handleClose (e) {
      const vm = this
      let type = e.mp.type
      if (type === 'confirm') {
        // to do 这个值还没有地方传，如果到时候要传的话，再看是什么类型
        console.log(vm.addDisVla)
        if (vm.addDisVla) {
          vm.createGoodsShop()
        } else {
          vm.$toast('返佣金额不能为空')
        }
      } else {
        vm.visible = false
        vm.addDisVla = ''
        vm.publicGoodsNo = ''
      }
    },
    handleSearch () {
      this.currentPage = 1
      this.getGoodsList()
    },
    handleTabChange (e) {
      let key = e.target.key
      this.isShelf = key

      this.currentPage = 1
      this.getGoodsList()
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this.getGoodsList()
      }
    },
    handleEditGoods (item) {
      const vm = this
      vm
        .$dialog('是否删除该商品', '')
        .then(() => {
          vm.deleteDisShop(item.goodsNo)
        })
        .catch(() => {})
    },

    getGoodsList () {
      const vm = this
      let params = {
        shopId: vm.$store.state.account.shopId,
        // shopId: 56,
        isShelf: '1',
        isDis: 'N'
      }
      if (vm.filterVal) {
        if (/^\d*$/.test(vm.filterVal) && vm.filterVal.length === 18) {
          params.goodsNo = vm.filterVal
        } else {
          params.goodsName = vm.filterVal
        }
      }
      FIND_SHOP_GOODS_PAGE(params, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { list, isFirstPage, isLastPage } = r.data.data
            vm.printList(list, isFirstPage, isLastPage)
            if (vm.isShelf === '1') {
              vm.putawayName = `上架商品(${r.data.data.total})`
            } else {
              vm.soldOutName = `下架商品(${r.data.data.total})`
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    printList (list, isFirst, isLast) {
      if (isFirst) {
        this.goodsList = list
        if (isLast || !list.length) {
          // only one page
          this.alreadyLastPage = true
        } else {
          // has next page
          this.alreadyLastPage = false
          this.currentPage += 1
        }
      } else if (isLast) {
        // more than one page and this is the last page
        this.goodsList.push(...list)
        this.alreadyLastPage = true
      } else {
        // middle page
        this.goodsList.push(...list)
        this.alreadyLastPage = false
        this.currentPage += 1
      }
    },
    getGoodsOutNum () {
      const vm = this
      let params = {
        shopId: vm.$store.state.account.shopId,
        isShelf: '0'
      }
      if (vm.filterVal) {
        if (/^\d*$/.test(vm.filterVal) && vm.filterVal.length === 18) {
          params.goodsNo = vm.filterVal
        } else {
          params.goodsName = vm.filterVal
        }
      }
      FIND_SHOP_GOODS_PAGE(params, 1, 10)
        .then(r => {
          if (r.data.code === '0') {
            vm.soldOutName = `下架商品(${r.data.data.total})`
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    deleteDisShop (goodsNo) {
      const vm = this
      DELETE_GOODS_DIS_API(vm.$store.state.account.shopId, goodsNo)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('删除商品成功', '').then(() => {
              vm.goodsList = []
              vm.currentPage = 1
              vm.getGoodsList()
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    createGoodsShop () {
      const vm = this
      CREATE_GOODS_DIS_API(vm.$store.state.account.shopId, vm.publicGoodsNo)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('添加成功', '').then(() => {
              vm.goodsList = []
              vm.currentPage = 1
              vm.getGoodsList()
              vm.publicGoodsNo = ''
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70px;
  position: relative;
  .backgroundBule {
    width: 100%;
    height: 70px;
    background: #5e6dfb;
    position: absolute;
    top: 0;
    z-index: -1;
  }
  .input {
    width: 70%;
    height: 30px;
    padding-left: 10px;
    font-size: 14px;
    color: #cccccc;
    border: 1px solid #cccccc;
    border-radius: 25px;
  }
  .searchClick {
    position: absolute;
    right: 60px;
    z-index: 5;
  }
}
.list {
  height: calc(100% - 110px);
  > .scroll-wrap {
    .goods-block {
      width: calc(100% - 20px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
      margin: 0 10px 10px;
      // box-shadow: 0 0 8px lighten($blue, 20%);
      height: 80px;
      position: relative;
      overflow: hidden;
      transform: translateY(10px);
      > .preview {
        width: 48px;
        height: 48px;
      }
      > .goods-info {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 14px;
        width: calc(100% - 150px);
        height: 55px;
        > .goods-price {
          > .discount {
            display: inline-block;
            color: $red;
            min-width: 50px;
            padding-right: 10px;
          }
          > .amount {
            color: $gray;
          }
          > .icon {
            border-radius: 4px;
            border: 1px solid #5d93fd;
            text-align: center;
            line-height: 30px;
            font-size: 12px;
            padding: 2px 3px;
          }
        }
      }
      > .edit-block {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-self: flex-start;
        height: 55px;
        > .goods-stock {
          font-size: 14px;
          color: #cccccc;
        }
        > .tag {
          font-size: 10px;
          color: $white;
          background-color: $blue;
          position: absolute;
          top: -5px;
          right: -35px;
          padding: 15px 30px 2px;
          transform: rotate(45deg);
          &.danger {
            background-color: $red;
          }
        }
        > .tagImg {
          width: 38px;
          height: 38px;
          background: #fff;
          position: absolute;
          top: 0;
          right: 0;
        }
        > .edit-btn {
          width: 40px;
          border-radius: 6px;
          display: block;
          color: $white;
          font-size: 10px;
          background-color: $blue;
          padding: 0;
          height: 20px;
          line-height: 20px;
          transform: translateY(5px);
        }
      }
    }
    .end-tip {
      margin: 0;
      padding: 15px;
      text-align: center;
      color: $gray;
      font-size: 15px;
    }
  }
}
.modal {
  display: flex;
  justify-content: space-between;
  span {
    font-size: 14px;
    color: #000;
  }
  .inputCalss {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding-left: 5px;
    font-size: 14px;
  }
}
</style>
